<?php include("includes/core.php"); ?>
<?php include("includes/session.php"); ?>
<?php include("includes/header.php"); ?>
<?php include("notif.php"); ?>

<style>
	div{
		font-family: 'SEGOE UI';
	}
	.table{
		border: 1px solid #DDD;
		font-family: 'SEGOE UI';
	}
	.tr-header{
		background-color: #0088cc; 
		color: #FFF;
	}
	.check{
		cursor: pointer;
	}
</style>

<script type="text/javascript">
	/* Table initialisation */
	$(document).ready(function() {
		$('#example').dataTable( {
			"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
			"sPaginationType": "bootstrap",
			"aoColumns": [
				{ "sClass": "center", "bSearchable": false, "bSortable": false },
				{ "sClass": "left", "bSearchable": true, "bSortable": true},
				{ "sClass": "left", "bSearchable": true, "bSortable": true},
				{ "sClass": "left", "bSearchable": true, "bSortable": true }
			],
			"oLanguage": {
				"sLengthMenu": "_MENU_ records per page"
			}
		} )	
	} );
</script>

<div class="span9">  
    <h3>SMS</h3>                      
    <ul class="breadcrumb well">
        <li class="active">Draft</li>                
    </ul>    
    
    <table class="table" id="example">
        <thead>
            <tr class="tr-header">
                <th width="3%">
                    <input class="check-real-all" type="checkbox" style="display: none">
                    <i class="icon-check check-all" style="opacity:0.2"></i>
                </th>
                <th width="7%">
                	No
                </th>
                <th width="45%">
                	Nama Format
                </th>
                <th width="45%">
                	Format
                </th>
            </tr> 
        </thead>
        <tbody>            
		
		<?php
            $sql_ambil_format = "SELECT * FROM tb_format";
            $query_ambil_format = mysql_query($sql_ambil_format);
            
            $i = 1;
            while($ambil_format = mysql_fetch_array($query_ambil_format)){
        ?>
        
        	<tr class="select_format">
	        	<td>
	                <input class="id-format" type="hidden" value="<?php echo $ambil_format['id_format'];?>" />
	                <input class="check-real" type="checkbox" style="display:none">
	                <i class="icon-check check" style="opacity:0.2"></i>
				</td>
	            <td class='view-format' style='cursor: pointer'><?php echo $i; ?></td>
	            
	            <?php
	            	$id_operasi = $ambil_format['id_operasi'];
	            	$sql_cari_nama = "SELECT * FROM tb_operasi WHERE id_operasi = '$id_operasi'";
	            	$query_cari_nama = mysql_query($sql_cari_nama);
	            	$cari_nama = mysql_fetch_array($query_cari_nama);
	            ?>
	            
	            <td class='view-format' style='cursor: pointer'><?php echo $cari_nama['nama_operasi']; ?></td>
	            <td class='view-format' style='cursor: pointer'><?php echo $ambil_format['format']; ?></td>
			</tr>
	<?php
                $i++;        
            }
	?>
    	</tbody>
	</table>

	<div class="pull-left" style="margin: -20px 0px 0px 0px">
    	<div class="input-prepend">
			<span class="add-on"><i class="icon-trash" style="opacity: 0.7;"></i></span>
			<button class="btn btn-danger but-del" type="button" disabled="disabled">Hapus</button>
			<span class="add-on"><i class="icon-plus" style="opacity: 0.7;"></i></span>
			<button class="btn btn-primary but-add" type="button" onClick="window.location.href='format-tambah.php'">Tambah</button>
		</div>
    </div>


</div><!--/span-->

<?php include("includes/footer.php"); ?>

<script type="text/javascript">
	var cek = 0;
	var tempView = '';

    $('document').ready(function(){
		$('.check').live('click',function(){
			if($(this).parent('td').find('.check-real').is(':checked')){
				cek--;
				$(this).parent('td').find('.check-real').removeAttr('checked');
				$(this).css('opacity','0.2');
				$(this).parent('td').parent('tr').removeClass('info');
				$(this).parent('td').parent('tr').css('color','');
			}else{
				cek++;
				$(this).parent('td').find('.check-real').attr('checked','checked');
				$(this).css('opacity','1');
				$(this).parent('td').parent('tr').addClass('info');
				$(this).parent('td').parent('tr').css('color','');
			}
			
			if(cek > 0){
				$('.but-del').removeAttr('disabled');
			} else{
				$('.but-del').attr('disabled','disabled');
			}
			
			if(cek==$('.check').length){
				$('.check-all').css('opacity','1');
				$('.check-real-all').attr('checked','checked');
			} else{
				$('.check-all').css('opacity','0.2');
				$('.check-real-all').removeAttr('checked');
			}
			return false;
		});
		
		$('.check-all').click(function(){
			var cekCentang = $(this).parent('th').find('.check-real-all');
			//alert(cekCentang);
			if(cekCentang.is(':checked')){
				$('.check').each(function(){
					var temp = $(this);
					if($(this).parent('td').find('.check-real').is(':checked')){	
						temp.click();
					}
				});
				cekCentang.removeAttr('checked');
				$(this).css('opacity','0.2');
			}else{
				$('.check').each(function(){
					var temp = $(this);
					if(!$(this).parent('td').find('.check-real').is(':checked')){	
						temp.click();
					}
				});
				cekCentang.attr('checked','checked');
				$(this).css('opacity','1');
			}
		});
			
		$('.check-all').live({
			mouseenter:
			   function()
			   {
					$(this).css('opacity','1');
			   }
		   }
		);

		
		$('.check').live({
			mouseenter:
			   function()
			   {
					$(this).css('opacity','1');
			   },
			mouseleave:
			   function()
			   {
					if(!$(this).parent('td').find('.check-real').is(':checked')){
						$(this).css('opacity','0.2');
					}		
			   }
		   }
		);
		
		$('.but-del').click(function(){
			$("input:checkbox").each(function(){
				if($(this).is(':checked')){												
					var form_format = {
						id_format: $(this).parent('td').find('.id-format').val()
					};
					$.ajax({
						type: "POST",
						url: "act_delete_format.php?aksi=1", 
						data: form_format, 
						cache: false, 
						success: function(format){
							setTimeout(function(){
								location.reload();  
							},500);
						} 
					});
				} 
			}); 
		});

		$('.select_format').live('click', function(){
			var id = $(this).find(".id-format").val();
			location.href = "format-edit.php?id="+id;
		});
});
</script>